<template>
  <div class="platform-home">

    <!-- 2. 统计卡片区域 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <p class="stat-label">总学校数</p>
            <p class="stat-value">{{ totalSchools }}</p>
            <p class="stat-trend">
              <span class="trend-up">↑ 5.2%</span> 较上月
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <p class="stat-label">总用户数</p>
            <p class="stat-value">{{ totalUsers }}</p>
            <p class="stat-trend">
              <span class="trend-up">↑ 12.8%</span> 较上月
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <p class="stat-label">课程资源数</p>
            <p class="stat-value">{{ totalCourses }}</p>
            <p class="stat-trend">
              <span class="trend-up">↑ 8.3%</span> 较上月
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <p class="stat-label">今日活跃</p>
            <p class="stat-value">{{ todayActive }}</p>
            <p class="stat-trend">
              <span class="trend-down">↓ 2.1%</span> 较昨日
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 3. 图表统计区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <echarts chart-title="学校注册数统计" />
      </el-col>
      <el-col :span="12">
        <echarts chart-title="用户活跃度统计" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Echarts from '../echarts/echarts.vue';

// 统计数据
const totalSchools = ref(128);
const totalUsers = ref(35620);
const totalCourses = ref(1256);
const todayActive = ref(8942);
</script>

<style scoped>
.platform-home {
  padding: 10px;
}

.carousel-container {
  width: 98%;
  margin: 0 auto 20px;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stats-row {
  margin: 0 10px 20px;
}

.stat-card {
  height: 100%;
  background-color: #f0f7ff;
  border-left: 4px solid #409EFF;
}

.stat-content {
  padding: 15px;
}

.stat-label {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-trend {
  font-size: 12px;
}

.trend-up {
  color: #27ae60;
}

.trend-down {
  color: #e74c3c;
}

.charts-row {
  margin: 0 10px;
}
</style>